<template>
	<view class="u-demo" style="padding-left: 20rpx;height: 100%;background-color: #FFFFFF;">
		<view class="u-demo-wrap" style="background-color: #ffffff;">
			<view v-if="title==='常见问题'" class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<uni-transition :duration="1000" :mode-class="'slide-top'"  :show="true" >
					<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
						<u-collapse-item :index="index" :title="item.head" v-for="(item, index) in itemList" :key="index">
							{{item.body}}
						</u-collapse-item>
					</u-collapse>
				 </uni-transition>
			</view>
			<view v-if="title==='操作手册'" class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<uni-transition :duration="1000" :mode-class="'slide-top'"  :show="true" >
					<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
						<u-collapse-item  :index="index" :title="item.head" v-for="(item, index) in operationListData" :key="index">
							<view style="margin-right: 20rpx;">{{item.body}}</view>
							<view style="margin-right: 20rpx;">{{item.one}}</view>
							<view style="margin-right: 20rpx;">{{item.two}}</view>
							<view style="margin-right: 20rpx;">{{item.three}}</view>
							<view style="margin-right: 20rpx;">{{item.four}}</view>
						</u-collapse-item>
					</u-collapse>
				 </uni-transition>
			</view>
		</view>
		<view  style="text-align: center;padding-top:50rpx;color: #999999;font-size: 24rpx;">
			<u-loadmore
			  :status="status" 
			  :loading-text="loadingText" 
			  :loadmore-text="loadmoreText" 
			  :nomore-text="nomoreText" 
			    />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				itemList: [{
					head: "1.什么是国内游客？",
					body: "国内游客是指报告期内在中国（大陆）观光游览、休闲度假、探亲访友、保健疗养、购物娱乐、学习交流、会议培训或开展经济、文化、体育、宗教等活动的中国（大陆）居民，其出游的目的不是通过所从事的活动谋取报酬。",
					show: false,
					one:'',
				}, {
					head: "2.什么是国内过夜游客",
					body: "国内过夜游客是指中国（大陆）居民离开惯常居住地在境内其他地方的旅游住宿单位内至少停留一夜，最长不超过12个月的国内游客。",
					show: false,
				}, {
					head: "3.什么是国内一日游游客",
					body: "国内一日游游客是指国内居民离开惯常居住地10公里以上，出游时间超过6小时，不足24小时，并未在境内其他地方的旅游住宿单位过夜的国内游客。",
					show: false,
				}, {
					head: "4.什么是常住国",
					body: "常住国是指一个人在近一年的大部分时间所居住的国家（或地区）或在这个国家（或地区）只居住了较短的时间，但在12个月内仍将返回的这个国家（或地区）。",
					show: false,
				}, {
					head: "5.什么是常住地",
					body: "常住地指一个常住国的居民，在近一年的大部分时间所居住的城镇或在这个城镇只居住了较短的时间，但在12个月内仍将返回的这个城镇。",
					show: false,
				}, {
					head: "6.什么是红色旅游",
					body: "红色旅游指以中国共产党领导人民在革命和战争时期建树丰功伟绩所形成的纪念地、标志物为载体，以其所承载的革命历史、革命事迹和革命精神为内涵，组织接待旅游者开展缅怀学习、参观游览的主体性旅游活动。",
					show: false,
				},
				{
					head: "7.什么是红色旅游景点景区",
					body: "红色旅游景点景区是指拥有重要的历史和革命代表性的红色旅游资源并产生重要影响的景区；或县以上主管部门命名的红色旅游景区。",
					show: false,
				}],
				operationListData:[
					{
						head: "1.合同签订流程",
						body: "在小程序“我的”页，点击头像右方签署合同，法人，联络人需下载合同，签字盖章完成签署；自然人可选择纸质合同签署或电子合同签署，点击后，在签署合同页有详细的签署流程。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "2.调查问卷功能如何使用",
						body: "在首页中，当存在新的调查问卷时，轮播图会进行轮播显示，您可以点击图片进入调查问卷页，在调查问卷页首页会显示调研内容，点击开始答题，进入答题页。题目包括单选、多选、文本、甄别、跳转等题型。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "3.实时记账和按次记账的区别",
						body: "实时记账可以在您的旅程中发生消费后，进行实时记录，便于记录您的消费情况，可以有效防止漏记。按次记账可以在您的旅程结束后，进行按次记录，当您旅程结束后，进行整体记录上传",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "4.实时记账如何使用",
						body: "在首页中，有实时记账和按次记账功能，在实时记账状态下，点击去记账，可以进入到实时记账页，您也可以在实时记账状态下，点击tab栏中的“+”号，进入实时记账页。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "5.按次记账如何使用",
						body: "在首页中，有实时记账和按次记账功能，在按次记账状态下，点击去记账，可以进入到实时记账页，您也可以在按次记账状态下，点击tab栏中的“+”号，进入按次记账页。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "6.记账类别分为参团和非参团",
						body: "自然人样本可以选择记账类别，分为参团及非参团两种类别进行记账，参团游需要提交旅行前报团所需的费用。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "7.自然人在记账中，当月出游3次及以上需上传小票",
						body: "为了统计有效的记账记录，当您本月使用记账上报3次以后，需要您上传消费的小票，以图片的形式进行上传。",
						show: false,
						one:"",
						two:"",
						three:"",
						four:""
					},
					{
						head: "8.积分获取规则",
						body: "在'我的'页中，头像右上方显示个人积分情况，点击后，可以进入个人积分详情页。积分规则如下：",
						one:"1)问卷部分：问卷发布5小时内答卷为5分，5-12小时以内4分，12-24小时以内3分，24-48小时2分，48小时以上1分。",
						two:"2)实时记账，每记账一次1分，上限10分。   按次记账，记账时间为出游时间1周内5分，记账时间为出游时间1周以上2周以内3分，月底记账为1分。",
						three:" 3)意见反馈：反馈一次记2分，上限10分。",
						four:"4)登录一次一分 ",
						show: false
					}
					
				],
			
				accordion: true,
				arrow: true,
				hoverClass: 'hover2',
				itemStyle: {},
				key: true,
				title:''//顶部导航标题
			}
			
		},
		onLoad(options) {
			this.title=options.title
			console.log('title',this.title)
			this.status="loading"
			var that=this
			setTimeout(function (){
				that.status="nomore"
			},500)
			uni.setNavigationBarTitle({ //动态更改导航栏标题方法名称  动态赋值导航栏标题名称
				title:options.title
			})
		},
		methods: {
			change(index) {
				let str = '';
				if(Array.isArray(index)) {
					let arr = index.map(val => {
						return Number(val) + 1;
					})
					index = arr.join(',');
				} else {
					index = Number(index) + 1;
				}
			},
		}
	}
</script>

<style>
	.hover1 {
		background-color: red;
	}
</style>

<style lang="scss" scoped>
	.wrap {
		// padding: 24rpx;
	}

	.item {
		//padding: 0 24rpx;
	}

	.head {
		font-size: 30rpx;
		color: $u-main-color;
		line-height: 1;
		padding: 24rpx 24rpx;
	}

	.body {
		font-size: 28rpx;
		color: $u-tips-color;
		line-height: 1.4;
		padding: 24rpx;
	}
</style>
